<extend name="Public/base"/>
<block name="style">
    <style>
      .addBtn, .delBtn{
        width: 90px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #000;
        border-radius: 5px;
        color: #000;
        background: #eee;
        padding: 5px 10px;
        text-align: center;
        margin-left: 10px;
      }
      .option{
        margin-bottom: 5px;
      }
      .option .radio, .option .checkbox{
        display: block;
        float: left;
        margin: 5px;
      }
      .delBtn{
        cursor: pointer;
      }
    </style>
</block>
<block name="body">
    <script type="text/javascript" src="__STATIC__/uploadify/jquery.uploadify.min.js"></script>
    <div class="main-title">
        <h2>{$meta_title}</h2>
    </div>

    <form action="" method="post" class="form-horizontal">
        <!--  题目  -->
        <div class="form-item">
            <label class="item-label">题目</label>
            <div class="controls">
                <textarea name="question" cols="50" rows="10"></textarea>
            </div>
        </div>

        <!--  所属学科  -->
        <div class="form-item">
            <label class="item-label">所属学科</label>
            <div class="controls">
                <select name="sid" class="subject">
                    <option value="0">请选择学科</option>
                    <volist name="subject_list" id="vo">
                        <option value="{$vo.id}">{$vo.name}</option>
                    </volist>
                </select>
            </div>
        </div>

        <!--  章节 - 知识点  -->
        <div class="form-item">
            <label class="item-label">章节 - 知识点</label>
            <div class="controls">
                <select name="one_chapter_id" class="one_chapter">
                    <option value="0">请选择章节</option>
                    <volist name="chapter_list" id="vo">
                        <option value="{$vo.id}">{$vo.name}</option>
                    </volist>
                </select>
                <select name="two_chapter_id" class="two_chapter">
                    <option value="0">请选择知识点</option>
                </select>
            </div>
        </div>

        <!--  类型  -->
        <div class="form-item">
            <label class="item-label">类型</label>
            <div class="controls">
                <select name="style" class="style">
                    <option value="1">单选</option>
                    <option value="2">多选</option>
                </select>
            </div>
        </div>

        <!--  选项  -->
        <div class="form-item">
            <label class="item-label">选项<span class="check-tips"><span class="addBtn">添加选项</span></span></label>
            <div class="controls con_option">

            </div>
        </div>

        <!--  易错频率等级  -->
        <div class="form-item">
            <label class="item-label">易错频率等级</label>
            <div class="controls">
                <label><input type="radio" name="error_level" value="0" checked> 无</label>
                <label><input type="radio" name="error_level" value="1"> 较高</label>
                <label><input type="radio" name="error_level" value="2"> 特高</label>
                <label><input type="radio" name="error_level" value="3"> 极高</label>
            </div>
        </div>

        <!--  解析  -->
        <div class="form-item">
            <label class="item-label">解析</label>
            <div class="controls">
                <textarea name="analysis" cols="50" rows="10"></textarea>
            </div>
        </div>

        <input type="hidden" class="option_data" name="option">
        <input type="hidden" value="{:I('id')}" name="id" />
        <div class="form-item">
            <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
        </div>
    </form>
</block>

<block name="script">
    <script type="text/javascript">
        $('.subject').change(function (){
            var subject_list = {$subject_list_json};
            var sid = $(this).val();

            if(subject_list.length > 0){
                var option = "<option value='0'>请选择章节</option>";
                for(var i = 0; i < subject_list.length; i++){
                    if(subject_list[i].id == sid){
                        chapter_list = subject_list[i].chapter_list;
                        for (var j = 0; j < subject_list[i].chapter_list.length; j++) {
                            var obj = subject_list[i].chapter_list[j];
                            option += "<option value='"+ obj.id +"'>"+ obj.name +"</option>";
                        }
                        break;
                    }
                }
                $('.one_chapter').html(option);
                $('.two_chapter').html('<option value="0">请选择知识点</option>')
            }
        })

        var chapter_list = [];
        $('.one_chapter').change(function (){
            var one_chapter_id = $(this).val();
            if(chapter_list.length){
                var option = "<option value='0'>请选择知识点</option>";
                for(var i = 0; i < chapter_list.length; i++){
                    if(chapter_list[i].id == one_chapter_id){
                        for (var j = 0; j < chapter_list[i].son_list.length; j++) {
                            var obj = chapter_list[i].son_list[j];
                            option += "<option value='"+ obj.id +"'>"+ obj.name +"</option>";
                        }
                        break;
                    }
                }
                $('.two_chapter').html(option);
            }
        })

        var option_data = [];
        $('.addBtn').click(function (){
            var style = $('.style').val();
            if(style == 1){
                //单选
                var str = '<div class="option">\n' +
                    '                    <input type="radio" class="radio" name="radio" onclick="clickRadio(this)">\n' +
                    '                    <input type="text" class="text input-large value" oninput="changeValue(this)" placeholder="请输入选项内容">\n' +
                    '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                    '                </div>';
            }else{
                //多选
                var str = '<div class="option">\n' +
                    '                    <input type="checkbox" class="checkbox" onclick="clickCheckbox(this)">\n' +
                    '                    <input type="text" class="text input-large value" oninput="changeValue(this)" placeholder="请输入选项内容">\n' +
                    '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                    '                </div>';
            }
            var single_option = {"key": "", "value": "", "answer": false, "is_choose": false};
            option_data.push(single_option)
            formatOption();

            if($('.option').length > 0){
                $('.option').last().after(str);
            }else{
                $('.con_option').append(str);
            }

            $('.option_data').val(JSON.stringify(option_data))
        })

        function clickRadio(that)
        {
            var index = $('.radio').index(that);

            if(option_data.length > 0){
                option_data.forEach(function (val){
                    val.answer = false;
                })
            }
            option_data[index].answer = true;

            $('.option_data').val(JSON.stringify(option_data))
        }

        function clickCheckbox(that)
        {
            var index = $('.checkbox').index(that);
            option_data[index].answer = !option_data[index].answer;

            $('.option_data').val(JSON.stringify(option_data))
        }

        function formatOption()
        {
            var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
            if(option_data.length > 0){
                for(var i = 0; i < option_data.length; i++){
                    option_data[i].key = arr[i];
                }
            }
        }

        $('.style').change(function (){
            readerOption();
        })

        function changeValue(that){
            var index = $('.value').index(that);
            option_data[index].value = $(that).val();

            $('.option_data').val(JSON.stringify(option_data))
        }

        function delOption(that)
        {
            var index = $('.delBtn').index(that);
            option_data.splice(index, 1);
            $('.option').eq(index).remove();
            formatOption();

            $('.option_data').val(JSON.stringify(option_data))
        }

        function readerOption()
        {
            var str = '';
            if(option_data.length > 0){
                var style = $('.style').val();
                for(var i = 0; i < option_data.length; i++){
                    option_data[i].answer = false;
                    if(style == 1){
                        str += '<div class="option">\n' +
                            '                    <input type="radio" class="radio" onclick="clickRadio(this)">\n' +
                            '                    <input type="text" class="text input-large value" oninput="changeValue(this)" placeholder="请输入选项内容">\n' +
                            '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                            '                </div>';
                    }else{
                        str += '<div class="option">\n' +
                            '                    <input type="checkbox" class="checkbox" onclick="clickCheckbox(this)">\n' +
                            '                    <input type="text" class="text input-large value" oninput="changeValue(this)" placeholder="请输入选项内容">\n' +
                            '                    <span class="delBtn" onclick="delOption(this)">删除</span>\n' +
                            '                </div>';
                    }
                }
            }
            $('.con_option').html(str);
        }

        //导航高亮
        highlight_subnav('{:U("Manage/exercisesList")}');
    </script>
</block>
</html>